import * as mapvgl from 'mapvgl';
import { merge } from 'lodash-es';

import BMapMarkerClusterLayer from './BMapMarkerClusterLayer.js';

export default class BMapIconMarkerClusterLayer extends BMapMarkerClusterLayer {
  constructor(map, options) {
    super(map, options);
  }
  getLayer() {
    return new mapvgl.IconClusterLayer(this.options);
  }
  getOptions() {
    let opt = {
      uniqueKey: 'id',
      maxZoom: 16,
      minZoom: 3,
      clusterRadius: 150,
      minPoints: 2,
      showText: true,
      textOptions: {
        fontSize: 16,
        color: 'white',
        stroke: { color: 'black' },
        offset: [0, -64],
        // 格式化数字显示
        format: function (count) {
          return count >= 1000 ? Math.round(count / 1000) + 'k' : count;
        },
      },
      labelOptions: {
        fontSize: 14,
        color: '#ffffff',
        offset: [0, -64],
      },
      iconOptions: {
        icon: 'images/marker.png',
        scale: 1,
        width: 46,
        height: 64,
        offset: [0, -32],
      },
      iconExtent: { 0: 'images/marker.png' },
      enablePicked: true,
    };
    return merge({}, opt, this._options, { onClick: (e) => this.handleClick(e) });
  }
}
